<template>
  <div class="layout-container">
    欢迎使用任务分发管理系统
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  setup(props) {
    return {
      
    }
  }
})
</script>

<style lang="scss" scoped>
  .layout-container{
    overflow: auto;
    padding:20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    .home-tip{
      width: 100%;
      margin-bottom: 20px;
    }

    .shop-total-list{
      padding-bottom: 20px;
      // display: flex;
      .shop-total-li{
        padding: 10px 30px;
        // margin-right: 20px;
        border-radius: 5px;
        color:#fff;
        width: 100%;
        background: #36cfca;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .shop-total-li-svg{
          height: 50px;
        }
        .shop-total-li-info{
          text-align: right;
          .shop-total-count{
            font-size: 24px;
            font-weight: bold;
          }
          .shop-total-txt{
            font-size: 14px;
            padding-top: 5px;
          }
        }
      }
    }

    .next-total{
      padding-bottom:20px;
      .el-card :deep(.el-card__header){
        background: #fafafa !important;
      }
      .card-header{
        display: flex;
        justify-content: space-between;
        .card-header-title{
          font-weight: bold;
          color: #000;
        }
        .card-header-unit{
          font-size: 14px;
        }
      }
      .card-li{
        .card-num{
          font-weight: 500;
          font-size: 20px;
          color: #333;
          padding-bottom: 6px;
        }
        .card-txt{
          font-size: 14px;
        }
      }
      .card-info-list{
        .card-info-li{
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &:last-child{
            border: none;
          }
          .card-info-li-name{
            font-size: 14px;
            padding: 10px 0;
          }
          .card-info-li-num{
            font-size: 16px;
            color:#36cfca;
          }

        }
      }
      
    }
  }
</style>